$(function () {
    var canvas = document.getElementById("drawing");
    var edit = document.getElementById("edit");
    var ctx = canvas.getContext("2d");
    var strokeStyle = "#000";
    var lineWidth = 15;
    document.getElementById("slct-color").onchange = function () { strokeStyle = this.value };
    document.getElementsByClassName("slider")[0].onchange = function (e, v) { lineWidth = v };
    canvas.addEventListener("touchmove", draw, false);
    canvas.addEventListener("touchstart", draw, false);
    canvas.addEventListener("touchend", draw, false);
    function draw(e) {
        e.preventDefault();
        var touch = e.targetTouches[0];
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = strokeStyle;
        switch (e.type) {
            case "touchmove":
                ctx.lineTo(touch.clientX, touch.clientY);
                ctx.stroke()
                break;
            case "touchstart":
                ctx.beginPath()
                break;
            case "touchend":
                ctx.closePath();
                break;
        }
    };
    document.getElementById("clear-canvas").onclick = function () { ctx.clearRect(0, 0, canvas.width, canvas.height) };
    document.getElementById("save").onclick = function () {
        var blob = new Blob([canvas.toDataURL("image/png")], { type: "image/png" });
        saveAs(blob, "image.png");
    };

})
$(function () {
var set = document.getElementById("setting");
set.addEventListener("touchmove", setting, false);
//set.addEventListener("touchstart", setting, false);
//set.addEventListener("touchend", setting, false);
function setting(e) {
    //switch (e.type) {
    //  case "touchmove":
    //    break;
    //case "touchstart":
    //   break;
    //case "touchend":
    //    break;
    //}
    var touch = e.targetTouches[0];
    set.style.right = touch.clientX;
    set.style.bottom = touch.clientY
};
})



